<template>
    <div class="login_body">
        <div class="login_box">
            <!--            <img src="../assets/logo_new.png" class="logo">-->
            <div class="title">Minal后台管理系统</div>
            <div class="login_form">
                <input type="text" @keyup.enter="handleLogin" id="user" v-model="userName" placeholder="用户名"/>
                <input type="password" @keyup.enter="handleLogin" id="password" v-model="password"
                       placeholder="密码"/>
                <div class="yzm">
                    <input @keyup.enter="handleLogin" type="text" id="yzm" v-model="validCode"
                           placeholder="验证码"/>
                    <div @click="updateCode">
                        <MiIdentify class="yzmImg" :identifyCode="code"/>
                    </div>
                </div>
                <button type="button" id="login" @click="handleLogin">登录</button>
            </div>
        </div>
    </div>
</template>

<script lang="ts">
    import {Component, Vue, Watch} from 'vue-property-decorator'
    import {Route} from 'vue-router'
    import {Dictionary} from 'vuex'
    import {getMd5} from "@/utils/math";
    import {errorMsg, warningMsg} from "@/utils/message";
    import $http from "@/http";
    import {API} from "@/aconst/API";
    import {refreshUserInfo} from "@/utils/userKit";
    import {TagsViewModule} from "@/store/modules/tags-view";
    import MiIdentify from "@/components/MiIdentify.vue";
    import $K from "@/utils/kit";

    @Component({
        name: 'LoginSystem',
        components: {MiIdentify}
    })
    export default class LoginSystem extends Vue {
        userName = "";
        password = "";
        validCode = "";
        code = "";

        mounted() {
            this.updateCode();
        }

        activated() {
            this.updateCode();
        }

        updateCode() {
            let random = Math.random() + "";
            this.code = random.substr(2, 4);
        }

        handleLogin() {
            if (!this.userName || this.userName.length <= 0) {
                warningMsg("请输入账号");
                return;
            }
            if (!this.password || this.password.length <= 0) {
                warningMsg("请输入密码");
                return;
            }
            if (!this.validCode || this.validCode.length <= 0) {
                warningMsg("请输入验证码");
                return;
            }
            if (this.userName.length < 5) {
                errorMsg("账号输入错误");
                return;
            }
            if (this.password.length < 5) {
                errorMsg("密码输入错误");
                return;
            }
            if (this.validCode != this.code) {
                errorMsg("验证码输入错误");
                return;
            }
            let password = getMd5(this.userName + this.password);
            $http.post(API.login, {account: this.userName, password: password})
                .then((resLogin: any) => {
                    //登录成功
                    if (resLogin.success) {
                        //刷新字典
                        refreshUserInfo(resLogin);
                        TagsViewModule.delAllCachedViews();
                        TagsViewModule.delAllViews();
                        this.userName = "";
                        this.password = "";
                        $K.to("/index");
                        // setTimeout(() => {
                        //     // this.$router.push({path: this.redirect || '/', query: this.otherQuery});
                        //     // this.loading = false;
                        //     window.location.reload();
                        // }, 100);
                    } else {
                        this.updateCode();
                        this.validCode = "";
                    }
                });

        }

        private redirect?: string;
        private otherQuery: Dictionary<string> = {};

        @Watch('$route', {immediate: true})
        private onRouteChange(route: Route) {
            const query = route.query as Dictionary<string>;
            if (query) {
                this.redirect = query.redirect;
                this.otherQuery = this.getOtherQuery(query);
            }
        }

        private getOtherQuery(query: Dictionary<string>) {
            return Object.keys(query).reduce((acc, cur) => {
                if (cur !== 'redirect') {
                    acc[cur] = query[cur]
                }
                return acc
            }, {} as Dictionary<string>)
        }
    }
</script>


<style lang="scss" scoped>
    .login_body {
        width: 100%;
        height: 100vh;
        background: url(../assets/bg.jpg) repeat-x;
        background-size: auto 100%;
        position: relative;
    }

    .login_box {
        position: absolute;
        background-color: #6b56d8;
        width: 500px;
        height: 440px;
        top: 50%;
        left: 50%;
        margin: -220px auto auto -250px;
        border-radius: 10px;
    }

    .login_box .title {
        text-align: center;
        font-size: 24px;
        color: #fff;
        padding: 30px 0;
    }

    input:focus {
        outline: none;
    }

    .login_form #user,
    .login_form #password,
    .login_form #yzm {
        width: 70%;
        display: block;
        margin: auto;
        border: 0;
        padding: 15px 20px;
        border-radius: 5px;
        padding-left: 60px;
        font-size: 16px;
        margin-bottom: 20px;
        box-sizing: border-box;
        -webkit-box-sizing: border-box;
    }

    .login_form #user {
        background: #fff url(../assets/login_icon1.png) no-repeat 18px center;
        background-size: 18px;
    }

    .login_form #password {
        background: #fff url(../assets/login_icon2.png) no-repeat 18px center;
        background-size: 18px;
    }

    .login_form #yzm {
        background: #fff url(../assets/valid_code.png) no-repeat 18px center;
        background-size: 18px;
    }

    .yzm {
        position: relative;
    }

    .yzmImg {
        position: absolute;
        height: 100%;
        width: 120px;
        background: rgba(0, 0, 0, 1);
        right: 15%;
        top: 0;
        z-index: 2;
    }

    .yzm #yzm {
        border-top-right-radius: 0;
        border-bottom-right-radius: 0;
    }

    button {
        cursor: pointer;
        border: none;
        outline: none;
        background: none;
    }

    .login_form #login {
        background: #eb4405;
        display: block;
        width: 70%;
        margin: auto;
        box-sizing: border-box;
        -webkit-box-sizing: border-box;
        color: #fff;
        font-size: 16px;
        border-radius: 5px;
        padding: 15px 20px;
        margin-top: 60px;
        transition: all 0.3s;
        -webkit-transition: all 0.3s;
    }

    .login_form #login:hover {
        background: #db440b;
        transition: all 0.3s;
        -webkit-transition: all 0.3s;
    }

    .logo {
        position: absolute;
        top: -63px;
        width: 341px;
        left: 50%;
        margin-left: -170px;
        z-index: 0;
    }
</style>
